<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.common.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<title>成绩展示</title>
<style>
#standard {  
  display: -webkit-flex;  
  -webkit-justify-content: center;  
  -webkit-align-items: center;  
  padding:100px;
}

#box{
		display: -webkit-flex;  
		-webkit-justify-content: right;  
		-webkit-align-items: right;  
		padding:100px;
        
    }
    .text{
        width: 260px;
        border: 1px solid #e2e2e2;
        height: 30px;
        background-repeat: no-repeat;
        background-size: 25px;
        background-position:5px center;
        padding:0 0 0 40px;
    }
    .submit{

	background: #FF6805;
	border:0px;
	height:30px;
	width:100px;

}
}

}
</style>
</head>
<body>
<% request.setCharacterEncoding("utf-8"); %>
<div style="position:absolute;z-index:-1;width:100%;height:100%;">
    	<img src="img/2.jpg" width="100%" height="100%" />
</div>
	<div id="standard">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var url = 'StudentInfoServlet';//获得销量、营业额、x轴的数据
        $.getJSON(url).done(function(json) {//向url请求数据，如果成功，将数据放到json
            // 2.从json中获得数据 ，
            score = json.score;//营业额
            exam = json.exam;//月份
			averScore = json.averScore;
            info = json.info
            // 3.配置option
            var option = {
				    title : {
				        text: info,
				        subtext: '平时成绩分析'
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['该学生','平均分']
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            data : exam
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'该学生',
				            type:'bar',
				            data:score,
				        },
				        {
				            name:'平均分',
				            type:'bar',
				            data:averScore,
				        }
				    ]
				};

            myChart.setOption(option);
        })
       
    </script>
    
   <div id="box">
   <% request.setCharacterEncoding("utf-8"); %>
		<form action="TransitionServlet"  method="post">
        	<input type="text" name="info" placeholder="请输入学号或姓名" class="text">
        	<input type="submit" value="搜索" class="submit"/>
        </form>
        <form action="SetWeight.jsp"  method="post">
        	<input type="submit" value="重新设置权重" class="submit"/>
        </form>
    </div>
    </div>
</body>
</html>
